<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>关于我</title>
		<link rel="stylesheet" href="css/gototop.css" />
		<link rel="stylesheet" href="css/common.css" />
		<style>	
		/*左内容区*/
		blockquote {
		 background-color: #ECF8FF;
		 border-left: 0.6em solid #50BFFF;
		 margin: 0 0 2.0em;
		 padding: 1em 1em 1em 1em;
		 position: relative;
		 color: #888;
		}
		blockquote:before {
		  color: #392570;
		  font-size: 5em;
		  line-height: 0em;
		  margin-right: 0em;
		  vertical-align: -0.4em;
		}
		blockquote:after {
		  color: #392570;
		  font-size: 5em;
		  position:absolute;
		  right:3px;
		  bottom: 0em;
		  line-height: 0.1em;
		}
		
		.about-me {
			width: 660px;
		}
		.about-me img {
			max-width: 660px;
		}
		</style>
	</head>
	<body>
		<div id="app">
		 	<!-- 头部导航 -->
		    <header class="header" :class="{ 'header-fixed' : headerFixed }">
			    <div class="header-content">
			    <span class="header-title">{ Mingshan 的博客 }</span>	    
			    <el-row>
			        <el-col :span="24">			          
			          <el-menu default-active="5" class="el-menu-demo" mode="horizontal" @select="">
			            <el-menu-item index="1"><a href="index.html">首页</a></el-menu-item>
			            <el-menu-item index="2"><a href="随笔.html">随笔</a></el-menu-item>
			            <el-menu-item index="3"><a href="归档.html">归档</a></el-menu-item>
			            <el-menu-item index="4"><a href="标签.html">标签</a></el-menu-item>
			            <el-menu-item index="5"><a href="关于.html">关于</a></el-menu-item>
			          </el-menu>
			        </el-col>
			    </el-row>
			    </div>
		    </header>
		    <div v-show="headerFixed" style="position: relative;height: 60px;width: 100%;"></div>

			<main>
            <!-- 左侧导航 -->
	        <div class="main-left">
	        	<blockquote>
					<p>关于我</p>
				</blockquote>
				<div class="about-me">
					<p>努力学习中…</p>
					<b>Contact me:</b>
					<p>Github: https://github.com/mstao</p>
					<p>Email: walkerhan@126.com</p>
					<p>QQ: 499445428</p>
						
					<img src="img/apic.in_2017-10-12_14-48-37.jpg" />
				</div>	
	        </div>

          <!-- 右侧主内容区 -->
          <div class="main-right" >
             <div class="block">
             	<!--站点提示-->
                <div class="site-tips">
				    <el-card :body-style="{ padding: '0px' }">
				      <img src="img/maekagami-1.jpg" class="image" style="width: 300px;">
				      <div style="padding: 14px;">
				        <span>欢迎来到我的博客，本博客的内容大部分属于原创，少部分是转载的(￣▽￣)~*</span>
				        <div class="bottom clearfix">
				          <time class="time">{{ currentDate }}</time>
				          <el-popover ref="popover1" placement="top-start" title="联系我" width="200" trigger="hover" 
				          	content="QQ: 499445428   邮箱：499445428@qq.com">
						  </el-popover>
				          <el-button  type="text" v-popover:popover1>我在这里</el-button>
				          
				        </div>
				      </div>
				    </el-card>
                </div>
				<!--S 文章 评论-->
			    <div class="hot-article-comment">
			    <!--tab选择-->
			    <el-tabs type="border-card">
				  <el-tab-pane>
				    <span slot="label"><i class="el-icon-news"></i> 最热文章</span>
				    <!--文章列表-->
			    	<div class="hot-article-list">
			    		<div class="hot-article-item">
			    			<div class="view-comment-count">
			    				<span><img src="img/浏览 (1).png"><i>1322</i></span>
			    				<span><img src="img/评论 (2).png"><i>122</i></span>
			    			</div>
			    			<div class="view-comment-content">
			    				<a href="#">博客重构总结：React 服务端渲染结合单页面应用</a>
			    			</div>
			    		</div>
			    		
			    		<div class="hot-article-item">
			    			<div class="view-comment-count">
			    				<span><img src="img/浏览 (1).png"><i>122</i></span>
			    				<span><img src="img/评论 (2).png"/><i>122</i></span>
			    			</div>
			    			<div class="view-comment-content">
			    				<a href="#">博客重构总结：React 服务端渲染结合单页面应用</a>
			    			</div>
			    		</div>
			    		
			    		<div class="hot-article-item">
			    			<div class="view-comment-count">
			    				<span><img src="img/浏览 (1).png"><i>122</i></span>
			    				<span><img src="img/评论 (2).png"/><i>122</i></span>
			    			</div>
			    			<div class="view-comment-content">
			    				<a href="#">博客重构总结：React 服务端渲染结合单页面应用</a>
			    			</div>
			    		</div>
			    		
			    	</div>
			    	
				  </el-tab-pane>
				  <el-tab-pane>
				    <span slot="label"><i class="el-icon-document"></i> 最新评论</span>
				    	<div class="new-comment-list">
				    		<div class="new-comment-item">
				    			<a href="#" class="user-name">mingshan</a> <span> 评论了 </span> <a href="#" class="article-title">博客重构总结：React 服务端渲染结合单页面应用</a>
				    			: 
				    			<span class="comment-summary">你好，问下react服务端渲染除了seo和首屏输出以外还有什么特别的优点……</span>
				    		</div>
				    		
				    		<div class="new-comment-item">
				    			<a href="#" class="user-name">mingshan</a> <span> 评论了 </span> <a href="#" class="article-title">博客重构总结：React 服务端渲染结合单页面应用</a>
				    			: 
				    			<span class="comment-summary">你好，问下react服务端渲染除了seo和首屏输出以外还有什么特别的优点……</span>
				    		</div>
				    		
				    		<div class="new-comment-item">
				    			<a href="#" class="user-name">mingshan</a> <span> 评论了 </span> <a href="#" class="article-title">博客重构总结：React 服务端渲染结合单页面应用</a>
				    			: 
				    			<span class="comment-summary">你好，问下react服务端渲染除了seo和首屏输出以外还有什么特别的优点……</span>
				    		</div>
				    	</div>
				  </el-tab-pane>
				</el-tabs>
				</div>
				<!--E 文章 评论-->
				<div class="friend-link">
					<span>友情链接</span>
					 <ul v-for="o in 4" :key="o" class="friend-link-list">
					 	<li><a href="https://mstao.github.io/">{{'明山的博客 ' + o }}</a></li>
					 </ul>
				</div>
				
				<div class="footer">
					Copyright &copy; 2017 <img src="img/心 (1).png" /> Mingshan <br>
					Design by <a href="HTT">博客源代码</a>
				</div>
			  </div>
          </div>
    	</main>
		<!--GO TO TOP-->
		<div class="go-top">
	        <div class="arrow"></div>
	        <div class="stick"></div>
    	</div>
    	
		</div>
	
	</body>
	<!-- 先引入 Vue -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@next/lib/theme-chalk/index.css">
  	<!-- 引入组件库 -->
  	<script src="https://unpkg.com/element-ui@next/lib/index.js"></script>
  	<script src="https://cdn.bootcss.com/jquery/1.11.0-rc1/jquery.min.js"></script>
  	<script>
  	jQuery.noConflict();
    
    (function($){
         //在匿名函数里使用$作为jQuery别名,不影响全局
         $(function() {
		    $(window).scroll(function() {
		        if ($(window).scrollTop() > 100)
		            $('.go-top').show();
		        else
		            $('.go-top').hide();
		    });
		    $('.go-top').click(function() {
		        $('html, body').animate({scrollTop: 0}, 1000);
		    });
		});
	})(jQuery);
  		
    new Vue({
      el: '#app',
      data: function (){
	    return {
	      active:true,
	      headerFixed : true,
	      fullscreenLoading: false,
	      currentDate: (new Date()).toLocaleDateString()
	    }
	  }
    })
  	</script>
</html>

